import React, { useEffect } from 'react';
import { Image, Watermark } from 'antd';

const Home: React.FC = () => {
  useEffect(() => {
    const content: any = document.querySelector('.app-content');
    if (content) {
      content.classList.add('home');
    }
    return () => {
      if (content) {
        content.classList.remove('home');
      }
    };
  }, []);
  return (
    <Watermark
      content={['OrgSync']}
      rotate={-30}
      gap={[50, 50]}
    >
      <div style={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        height: 'calc(100vh - 100px)'
      }}>
        <Image
          src='/images/meeting.png'
          preview={false}
          style={{
            width: 'auto',
            height: 'calc((100vh - 100px) * 0.75)'
          }}
        />
      </div>
    </Watermark>
  );
};

export default Home;
